<script setup lang="tsx">
import { computed, ref } from "vue";
import { NfForm } from "@wenqian/nf-ui";

const formData = ref({
  name: "",
  hobby: "22",
  test: "",
});

const rules = ref<any>({
  name: [
    {
      required: true,
      message: "Please input Activity name",
      trigger: "blur",
    },
  ],
  hobby: [
    {
      required: true,
      message: "Please select hobby",
      trigger: "change",
    },
  ],
});
const column = computed(() => {
  return [
    {
      label: "姓名",
      prop: "name",
      layout: { span: 12 },
      render: (
        h: any,
        form: {
          name: any;
        },
      ) => {
        return (
          <el-input v-model={form.name} placeholder={"请输入姓名"}></el-input>
        );
      },
    },
    {
      label: "爱好",
      prop: "hobby",
      layout: { span: 12 },
      render: (
        h: any,
        form: {
          hobby: any;
        },
      ) => {
        return (
          <el-select v-model={form.hobby} placeholder={"请选择爱好"}>
            <el-option label="羽毛球" value={"1"}></el-option>
            <el-option label="乒乓球" value={"2"}></el-option>
          </el-select>
        );
      },
    },
    {
      label: "测试",
      prop: "test",
      placeholder: "请输入测试内容",
    },
  ];
});
</script>

<template>
  <nf-form
    :model="formData"
    :column="column"
    label-position="right"
    label-width="70px"
    :layout="{ gutter: 10 }"
    :rules="rules"
    submit
    reset
    reset-text="取消"
  ></nf-form>
</template>

<style scoped lang="scss"></style>
